<template>
  <div class="recommend">
    <p>{{title}}</p>
    <ul>
      <li v-for="(obj,ind) in recommend" :key="ind">
          <img :src="obj.img" alt>
          <p>{{obj.describe}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
import {mapState,mapActions} from 'vuex';
export default {
  data() {
    return {
      title: "热门推荐"
    };
  },
  computed: {
    ...mapState(["recommend"])
  },
};
</script>
<style scoped>
.recommend p {
  padding: 0.26rem 0.24rem;
  font-size: 0.28rem;
}
.recommend > p {
  display: inline-block;
  width: 100%;
  height: 0.94rem;
  text-align: left;
  font-size: 0.3rem;

  line-height: 0.42rem;
  border-bottom: 1px solid #ddd;
}
.recommend ul {
  width: 100%;
  height: 4.8rem;
  background: #fff;
  overflow: hidden;
}
.recommend ul li {
  height: 1.4rem;
  width: 100%;
  padding: 0 0.24rem;
  margin-top: 0.2rem;
  display: flex;
}
.recommend ul li img {
  flex-shrink: 0; /*解决了图片大小不一的问题*/
  width: 1.4rem;
  height: 1.4rem;
}
</style>
